<template>
  <i style="font-weight: 700; color: red">*</i><span style="color: black">数据资产表基础信息:</span>
  <p style="margin-left: -36%">
    <a-form :model="tableData" name="basic" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
      <a-form-item label="中文名称" name="daChName">
        <a-input v-model:value="tableData.daChName" placeholder="请输入标准中文名称" />
      </a-form-item>
      <a-form-item label="英文名称" name="daEnName">
        <a-input v-model:value="tableData.daEnName" placeholder="请输入标准英文名称" />
      </a-form-item>
      <a-form-item name="daDescribe" label="数据资产表明细">
        <a-textarea v-model:value="tableData.daDescribe" placeholder="请输入数据资产表明细描述" :rows="4" />
      </a-form-item>
      <!-- 所属目录 -->
      <div style="margin-left: 20%">
        <catalog-belong />
      </div>
      <!-- 数据资产表字段添加 -->
      <add-field />
    </a-form>
  </p>
  <p></p>
  <p>
    <a-button style="margin-top: 12%; margin-left: 45%" @click="handleCancel">取消</a-button>
    <a-button type="primary" style="margin-left: 1%" @click="handleOk">确认</a-button>
  </p>
</template>
<script lang="ts" setup>
  import AddField from './assetAddcomponent/addField.vue';
  import CatalogBelong from './assetAddcomponent/catalogBelong.vue';
  import { getDataAssetDetailHooks } from '@/hooks/DataAssetManagementHooks/getDataAssetDetailHooks';
  import { getListHooks } from '@/hooks/DataAssetManagementHooks/getDataAssetListHooks';
  //引入hooks
  const { tableData, dataAsset, addNewDataAssert } = getDataAssetDetailHooks();
  const { getData } = getListHooks();

  //取消按钮
  const handleCancel = (e: MouseEvent) => {
    console.log(e);
    dataAsset.drawer = false;
  };
  //确认按钮
  const handleOk = async (e: MouseEvent) => {
    console.log(e);
    await addNewDataAssert();
    dataAsset.drawer = false;
    getData();
  };
  // 输入验证
  const rules = {
    //中文名称
    daChName: [
      {
        required: true,
        message: '中文名称不能为空！',
      },
      {
        pattern: /^[\u4E00-\u9FA5]{0,30}$/,
        message: '请输入标准中文名称',
        // validateTrigger: 'onBlur',
      },
    ],
    //英文名称
    daEnName: [
      {
        required: true,
        message: '英文名称不能为空',
      },
      {
        pattern: '^[a-z][A-Za-z0-9-_]\{2,30}$',
        message: '3-30个字符以内英文大小写、数字及下划线且只能英文开头',
        validateTrigger: 'onBlur',
      },
    ],
  };
</script>
<style scoped>
  .tab1 {
    border: 1px solid black;
    width: 100%;
  }

  .biaotou {
    height: 40px;
    text-align: center;
  }

  .biaotou input {
    border: 1px solid black;
  }

  .xin2 {
    width: 80%;
  }

  .xie {
    width: 70%;
  }

  /* 下拉框 */
  .demo-dropdown-wrap :deep(.ant-dropdown-button) {
    margin-right: 8px;
    margin-bottom: 8px;
    width: 80%;
  }

  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .checkbox-Standard {
    padding: 0;
    width: 100px;
  }
</style>
